<template>
	<view class="content mainpadding">
		<view class="flexcenter" v-if="!cartInfo.length">
			<view class="placeholderimage" style="margin-top: 100rpx;"></view>
		</view>
		<view class="margin_bottom3" v-for="item in cartInfo" :key="item.id">
			<view class="mainpadding border2 ffffff padding_bottom positionr">
				<view class="flexleft">
					<view class="goodsImg margin_right3">
						<image :src="item.logoimage_text" mode=""></image>
					</view>
					<!-- <view class="number" v-if="item.salename">{{item.salename}}</view> -->
					<view class="flex1 justify_between_column" style="height: 157rpx;">
						<view class="text_a color_san bold" v-if="item.salename">【{{item.salename}}】</view>
						<view class="text_a color_san bold">{{item.goods_name}}</view>
						<view class="text_b color_six flexbetween margin_top1" v-if="item.wei || item.hei">
							<text>尺寸：{{item.wei}}*{{item.hei}}</text>
							<text>用量：{{item.formulacount}}{{item.size}}</text>
						</view>
						<view class="xiaolan" v-if="item.spunatdata_text && item.spunatdata_text.length">規格：<text
								class="margin_right1" v-for="(value) in item.spunatdata_text"
								:key="value.spunatid">{{value.spunatname}}*{{value.num}}</text></view>
						<view class="flexbetween">
							<view class="price">${{item.d_price}}&nbsp;&nbsp;&nbsp;x{{item.num}}</view>
							<view class="text_six color_orange">${{item.price}}</view>
						</view>
					</view>
				</view>
				<view class="xiaolan smalltext margin_top" v-if="item.childdata.length">商品規格一</view>
				<view class="flexleft margin_top1" v-for="ite in item.childdata" :key="ite.id">
					<view class="goodsImg margin_right3">
						<image :src="ite.logoimage_text" mode=""></image>
					</view>
					<view class="number" v-if="ite.salename">{{ite.salename}}</view>
					<view class="flex1 justify_between_column" style="height: 157rpx;">
						<view class="text_a color_san bold">{{ite.goods_name}}</view>
						<view class="text_b color_six flexbetween margin_top1" v-if="ite.wei || ite.hei">
							<text>尺寸：{{ite.wei}}*{{ite.hei}}</text>
							<text>用量：{{ite.formulacount}}{{ite.size}}</text>
						</view>
						<view class="xiaolan" v-if="ite.spunatdata_text && ite.spunatdata_text.length">規格：<text
								class="margin_right1" v-for="(value) in ite.spunatdata_text"
								:key="value.spunatid">{{value.spunatname}}*{{value.num}}</text></view>
						<view class="flexbetween">
							<view class="price">${{ite.d_price || 0}}&nbsp;&nbsp;&nbsp;x{{ite.num}}</view>
							<view class="text_six color_orange">${{ite.price}}</view>
						</view>
					</view>
				</view>
				<view class="ffffff line_top margin_top">
					<view class="flexright margin_top">
						<view class="flexleft margin_right3" @click="removeCart(item.id)">
							<u-icon name="trash" class="margin_right1" color="#777" size="18"></u-icon>
							<view class="text_b color_san">刪除</view>
						</view>
						<view class="flexleft" @click="edititem(item)">
							<u-icon name="edit-pen" class="margin_right1" color="#777" size="18"></u-icon>
							<view class="text_b color_san">編輯</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flexright margin_top">
				<!-- <view class="text_b color_san margin_right2">共計{{item.buycar_goods.length}}件商品</view> -->
				<view class="text_b color_san">合計</view>
				<view class="text_b color_orange">${{item.money_text}}</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footerBox">
			<view class="footerPirce flexbetween">
				<view class="flexleft paddingtb padding_left3">
					<view class="cart margin_right3">
						<view class="num" v-text="cartInfo.length"></view>
					</view>
					<view class="line_r margin_right2"></view>
					<view>
						<text class="text_j color_ling">總價：</text>
						<text class="totalPrice">$</text>
						<text class="totalPrice" style="font-size: 36rpx;" v-text="total_price"></text>
					</view>
				</view>
				<view class="flexleft">
					<view class="copy" @click="goGoodsList">加商品</view>
					<view class="settlement" @click="goFinalOrderInfo">確定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shop_id: uni.getStorageSync("shop_id"),
				cartInfo: [],
				total_price: 0, //總金額
				issm: 0
			}
		},
		onLoad(options) {
			if (options.issm) {
				this.issm = options.issm
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			// 編輯
			edititem(value) { //編輯訂單商品
				let obj = value
				// this.$set(obj,"notes",value.notes)
				uni.navigateTo({
					url: "/pages_index/goodsInfoEdit?msg=" + encodeURIComponent(JSON.stringify(obj))
				})
				// if (value.type == 0) {
				// 	this.$set(obj,"notes",item.notes)
				// 	uni.navigateTo({
				// 		url: "/pages_index/goodsInfoEdit?msg=" + encodeURIComponent(JSON.stringify(obj))
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 		url: "/pages_index/goodsInfoEditSecond?msg=" + encodeURIComponent(JSON.stringify(obj))
				// 	})
				// }
			},
			async getList() {
				let _this = this
				let res = await this.http.request('/api/goods/shopGoodsCartIndex', 'GET', {
					shop_id: this.shop_id
				})
				if (res.code == 1) {
					let money_text = 0
					let allmoney = 0
					res.data.forEach(item => {
						money_text = item.price
						item.childdata.forEach(value => {
							money_text = Number(money_text) + Number(value.price)
						})
						this.$set(item, "money_text", money_text)
					})
					res.data.forEach(item => {
						allmoney = Number(allmoney) + Number(item.money_text)
					})
					this.total_price = allmoney
					this.cartInfo = res.data
				} else {
					this.http.toast(res.msg)
					this.cartInfo = []
					this.total_price = 0
				}
			},
			async removeCart(id) {
				let _this = this
				this.http.modal('提示', '是否確認刪除', true, (resp) => {
					if (resp) {
						uni.showLoading({
							mask: true,
							title: "請稍後"
						})
						this.http.request('/api/goods/delGoodsCart', 'POST', {
							id
						}).then(res=>{
							uni.hideLoading()
							if (res.code == 1) {
								this.http.toast("刪除成功！")
								this.getList()
							} else {
								this.http.toast(res.msg)
							}
						})
						
					}
				})
			},
			goGoodsList() { //加商品
				uni.redirectTo({
					url: "/pages_index/shopInfo?id=" + this.shop_id
				})
			},
			goFinalOrderInfo() { //結帳
				// if (this.cartInfo.length == 0) {
				// 	this.http.toast("請添加商品")
				// 	return false
				// }
				uni.redirectTo({
					url: "/pages_index/finalOrderInfo?buycar_id=" + this.shop_id + "&issm=" + this.issm
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 180rpx;
	}

	.goodsImg {
		width: 157rpx;
		height: 157rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}

	}

	.number {
		padding: 5rpx 30rpx;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 0rpx 14rpx 0rpx 14rpx;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
	}

	.freeBox {
		width: 75rpx;
		height: 41rpx;
		line-height: 41rpx;
		text-align: center;
		background: rgba(255, 133, 5, .1);
		border-radius: 3rpx 3rpx 3rpx 3rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
	}

	.price {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FF5C00;
	}

	.textareas {
		width: 100%;
		box-sizing: border-box;
		height: 203rpx;
		// padding: 30rpx;
		border-radius: 8rpx;
		// border: 2rpx solid #EFEFEF;
	}

	// 底部
	.footerBox {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 40rpx;

		.footerPirce {
			width: 708rpx;
			height: 101rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 53rpx 53rpx 53rpx 53rpx;
		}

		.cart {
			width: 40.5rpx;
			height: 42.58rpx;
			background-image: url("@/static/images/index/cart_num.png");
			background-size: 100% 100%;
			position: relative;
		}

		.num {
			width: 35rpx;
			height: 35rpx;
			line-height: 35rpx;
			text-align: center;
			background: #FF5C00;
			border-radius: 50%;
			position: absolute;
			right: -20rpx;
			top: -20rpx;
			font-size: 17rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.line_r {
			width: 0;
			height: 42rpx;
			border-right: 2rpx dashed rgba(0, 0, 0, 1);
		}

		.totalPrice {
			font-size: 26rpx;
			font-family: DIN Next LT Pro-Medium;
			font-weight: 500;
			color: rgba(253, 70, 62, 1);
		}

		.copy {
			width: 145rpx;
			height: 101rpx;
			line-height: 101rpx;
			text-align: center;
			background: #FF8505;
			border-radius: 53rpx 0 0 53rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}

		.settlement {
			width: 145rpx;
			height: 101rpx;
			line-height: 101rpx;
			text-align: center;
			background: #FFB800;
			border-radius: 0rpx 53rpx 53rpx 0rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}
</style>